$(document).ready(function() {
    var nodes = [];

    nodes.push({
        strokeStyle : 'black',
        fillStyle   : 'green',
        textColor   : 'orange',
        hoverStrokeStyle       : 'red',
        hoverFillStyle : 'white',
        hoverTextColor : 'black',
        toString    : function() {
            return 'A';
        },
        onClick       : function() {
            alert('Value of this node is ' + this.toString());
        }
    },
    new Object('C'),
    {
        value : 'D/B',
        onDblClick : function() {
            alert('Double click event has been raised');
        }
    }/*,
    new Object(),
    new Object('X')*/
    );

    var edges = [];

    /*edges.push({
        source  : nodes[2],
        target  : nodes[4]
    });

    edges.push({
        value        : 'Auto',
        source       : nodes[1],
        target       : nodes[2],
        directed     : true,
        onClick      : function() {
            alert('This is edge');
        }
    });

    edges.push({
        source       : nodes[2],
        target       : nodes[3],
        directed     : false,
        toString     : function() {
            return "ABC";
        }
    });

    edges.push({
        textColor       : 'purple',
        hoverTextColor  : 'green',
        source          : nodes[0],
        target          : nodes[3],
        directed        : false,
        value           : '100',
        onDblClick      : function() {
            alert('The edge with value : ' + this.value + ' has been double clicked');
        }
    });*/

    edges.push({
        source       : nodes[0],
        target       : nodes[1],
        directed     : false
    });

    $("#box1").graphs({
        width       : 500,
        height      : 300,
        background  : "#EFEFEF",
        nodes       : nodes,
        edges       : edges,
        spreadConstant           :35
    });

    $("#box1").graphs("show");
});